<template>
  <div id="myChart1"  :style="{ width: '300px', height: '200px'}"></div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine(); // 初始化
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      let index = 0;
      var img =
        "";

      var colorList = [
        '#89DBE6',
        "#2878CA",
      ];

      myChart1.setOption({
        title: {
          text: "",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 50,
                height: 50,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
      
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["24%", "40%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{b|{b}}\n{a|{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  width: 3,
                  height: 3,
                  borderRadius: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  align: "center",
                  padding: [-20, 10, 0, 10],
                  height: 20,
                },
                b: {
                  padding: [-20, 10, -30, 10],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              {
                name: "北京",
                value: 5600,
              },
              {
                name: "上海",
                value: 3600,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
</style>
